<template>
	<!-- 充值页面 -->
	<view class="invest">
		<view class="wallet-f">
			<view class="tip">
				当前鲸币余额
			</view>
			<view class="surplus">
				{{coinAmount}}
			</view>
			<view class="change-tip">
				兑换比例:1元=100鲸币，充值到账可能会有延迟
			</view>
		</view>
		
		<view class="invest-act">
			<view class="tip">
				<image src="/static/images/icon/wechat_icon.png" mode="aspectFill"></image>
				<view class="icon-tip">微信支付</view>
			</view>
			<view class="selections">
				<view class="select-item" :class="isActive == index ? 'addclass':''" v-for="(item,index) in list" :key="index" @tap="select(index)">
					{{item.money}}个
				</view> 
				<view class="select-item"  :class="isfocus? 'addclass':''">
					<input type="text"  pattern="number" onkeyup="value=value.replace(/[^\d\.]/g,'')" id="test" style="padding: 0 20rpx;" v-model="val" placeholder="自定义" @focus="focus" @blur="blur"/>
				</view>
			</view>
		</view> 
		<view class="create">
			<button class="report" form-type="submit" @tap.stop="invest">立即充值</button>
		</view>
	</view>
</template>

<script>
	
	import api from '../../../common/api.js'
	
	export default {
		
		data() {
			return {
				coinAmount:'',				//用户当前鲸币数量
				isActive:0,						//选中项
				val:'',								//自定义金额
				isfocus:false,				//判断自定义金额输入框是否聚焦
				list:[{money:20},{money:50},{money:100},{money:200},{money:500}]  ,//预设充值金额
			}
		},
		
		computed:{
			tipCount() {
				if(this.isActive == 99) {
					return this.val
				}else {
					this.val = ''
					return this.list[this.isActive].money
				}
			}
		},
		
		async onShow() {
			this.coinAmount = await api.GetCheckCoin()
			console.log(this.coinAmount);
		},
		
		methods:{
			
			async invest() {//充值操作
				let _that = this
				let total = this.isActive == 99 ?parseFloat(this.val) : this.list[this.isActive].money
				console.log(typeof total,Number(total));
				if(!isNaN(Number(total) )) {
					let res = await api.Invest(total)
					let payList_id = res.order.id			//支付订单id
					let config = res.config
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: config.timeStamp,//时间戳
							nonceStr: config.nonceStr,//随机字符串
							package: config.package,//统一下单接口返回的 prepay_id 参数值
							signType: config.signType,
							paySign: config.paySign,//签名内容
							success: async function(res) {
								let check = await api.checkPayList(payList_id)
								_that.coinAmount = await api.GetCheckCoin()
								uni.showToast({
									title:'已充值成功，到账时间可能存在延迟',
									icon:'success'
								})
							 },
							 fail: function (err) {
								 uni.showToast({
									title:err,
									icon:'none'
								 })
							 }
						});
				}else {
					uni.showToast({
						title:'请选择充值金额',
						icon:'none'
					})
				}
			},
			
			select(index) {//切换预选项
				this.isActive = index
			},
			
			focus() {//金额输入框焦点
				this.isfocus = true
				this.isActive = 99
			},	
			
			blur() {//金额输入框失去焦点
				this.isfocus = false
			},
		}
	}
</script>

<style lang="scss">
page {
	background-color: #fff;
}
.wallet-f {
	padding:40rpx 20rpx 20rpx;
	border-bottom: 30rpx solid #f3f3f3;
	.tip {
		text-align: center;
		font-size: 30rpx;
		color: #9599b8;
		line-height: 40rpx;
	}
	.surplus {
		font-size: 52rpx;
		width: 710rpx;
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
		font-weight: 600;
		color: #fc2a53;
		border-bottom: 1rpx solid #f1f1f1;
	}
	.change-tip {
		width: 660rpx;
		padding: 20rpx 10rpx 0;
		font-size: 30rpx;
		line-height: 50rpx;
		color: #ababab;
	}
}
.invest-act {
	margin: 30rpx 0 0 0;
	padding:30rpx 20rpx;
	.tip {
		display: flex;
		align-items: center;
		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
		}
	}
}
.create {
	position: fixed;
	height: 150rpx;
	width: 750rpx;
	z-index: 99;
	bottom: 0;
	background-color: #fff;
}
.report {
	position: absolute;
	bottom: 0;
	top: 0;
	width: 600rpx;
	height: 82rpx;
	margin: auto;
	left: 0;
	right: 0;
	border-radius: 60rpx;
	text-align: center;
	line-height: 82rpx;
	color: #FFFFFF;
	border-radius: 60rpx;
	background-color: #0690ff;
}
.selections {
	display: flex;
	flex-wrap: wrap;
	padding: 40rpx ;
	height: 240rpx;
	justify-content: space-between;
}
.select-item {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 36rpx;
	width: 180rpx;
	height: 95rpx;
	color: #3f3f3f;
	border: 2rpx solid #e9e9e9;
}
.active {
	border: 1rpx solid #88b8ff;
}
.addclass {
	border: 1rpx solid #068fff;
	color: #068fff;
}
</style>
